/*
 1，加载分类
 2，加载排序
 3，根据了分类和排序加载商家列表
 * */
define([
		'yf', 'yfUtil',
		'jquery',
		'underscore',
		'text!./template/container.html',
		'text!../../common/template/proList.html',
		'text!./template/menu.html',
		'Layer',
		'text!./template/classPullList.html',
		'text!./template/tapListTpl.html',
		'Loader'
	],
	function(yf, yfUtil, $, _, containerTpl, proList, menuTpl, Layer, classPullListTpl,tapListTpl,Loader) {
		//当前显示下半部分，就是一直能控制的范围
		var activeContainer;
		var myLoader;
		var obj = {
			initialize: function() {
				$('.goBack').on('click', function() {
					yf.goBack_WP();
				});
				//高度渲染
				var bodyHeight = parseInt($('.body').css('height'));
				var headerHeight = parseInt(obj.$el.find('.sameTap').css('height'));
				var mainHeight = bodyHeight - headerHeight;
				obj.$el.find('.main').css('height', mainHeight + 'px');
				//加载商家列表
				obj.loadClassList();
				obj.loadChangMoreData();
			},
			bindEvents: {
				'click .tapList': 'clickClass',
				'click .menuList': "selectPro",
				'click .changeMore': "changeMore"
			},
			loadClassList: function(list, className) {
				//判断是否有传参？是从下拉弹层中点进来的:第一次进页面的
				if(list) {
					var list = list;
				} else {
					//没数据的时候
					var list = {
						"name": "美食",
						"num": 11232,
						"id":"delicious_food",
						"childer": [{
							"name": "全部",
							"num": 11232,
							"id":"all"
						}, {
							"name": "小吃",
							"num": 11232,
							"id":"snack"
						}, {
							"name": "甜品",
							"num": 11232,
							"id":"dessert"
						},{
							"name": "早餐",
							"num": 11232,
							"id":"breakfast"
						}]
					}
				}
				var html = $(tapListTpl).html();
				var fn = _.template(html);
				var tpl = fn({result:list});
				obj.$el.find('.tapListDiv').attr('data-name',list.id).html(tpl);
				if(className == undefined) {
					//点击第一个class，"全部"
					obj.$el.find('.tapList').eq(0).click();
				} else {
					//传哪个点哪个
					obj.$el.find('.' + className).click();
				}
			},
			//加载类别下拉框的数据
			loadChangMoreData: function() {
				var url = './data/classPullList.json';
				yf.ajax({
					type: 'get',
					async: true,
					url: url,
					success: function(data) {
							var data = data.data;
							var html = $(classPullListTpl).html();
							var fn = _.template(html);
							var tpl = fn({
								result: data
							});
							obj.$el.find("#changeMoreDiv").html(tpl);
							obj.$el.find('.changeMoreDivList').on('click', function(e) {
								obj.$el.find('.changeMoreDivList').removeClass('cMDLactive');
								$(this).addClass('cMDLactive');
								//清空下半部分
								obj.$el.find('.main').html("");
								var target = $(e.currentTarget);
								//根据对象树找到list对象
								var classFatherName = target.closest('.classAll').attr('data-name');
								for(var i = 0; i < data.length; i++) {
									if(data[i].name == classFatherName) {
										var list = data[i];
										break;
									}
								}
								var className = target.attr('data-name');
								$('body').on('click',function(){
									obj.$el.find('#changeMoreDiv').addClass('displayNone');
									if(mylayer){
										mylayer.remove();
									}
									$(this).off('click');
								});
								//加载第一行列表
								obj.loadClassList(list, className);
							});
					}
				});
			},
			//增加下拉弹层：美食等
			changeMore: function() {
				var div = obj.$el.find('#changeMoreDiv').removeClass('displayNone');
				var showList = [obj.$el.find('.sameTap'), $('.nav_view'), obj.$el.find('#changeMoreDiv')];
				mylayer = new Layer($('body'), showList, function() {
					//回调，就是点击弹层除了消失还会执行什么操作
					div.addClass('displayNone');
				});
			},
			//点击美食等
			clickClass: function(e) {
				var target = $(e.currentTarget);
				var id = target.attr('data-name'); //id=all/snake/...
				obj.$el.find('.tapList').removeClass('active');
				target.addClass('active');
				var sonNode = obj.$el.find('.container[data-id="' + id + '"]');
				//如果大分类对应的子container存在则显示隐藏
				if(sonNode.length != 0) {
					obj.$el.find('.container').hide();
					sonNode.show();
					activeContainer = sonNode;
				} else {
					//如果不存在则加载新的子container
					obj.$el.find('.container').hide();
					var html = $(containerTpl).html();
					var fn = _.template(html);
					var tpl = fn({
						result: {
							id: id
						}
					});
					activeContainer = $(tpl);
					//先加载整个大容器
					obj.$el.find('.main').append(activeContainer);
					var menu = [{
						"name": "综合排序",
						"code": "complex"
					}, {
						"name": "销量最高",
						"code": "highestSales"
					}, {
						"name": "离我最近",
						"code": "closesToMe"
					}];
					//再加载四个选项一列
					var menuTpl = obj.loadMenu(menu);
					activeContainer.find('.menu').html(menuTpl);
					//获取综合排序的信息,加载对应商家列表
					var complexBtn = activeContainer.find('.menuList').eq(0);
					complexBtn.addClass('active');
					var fatherClass = obj.$el.find('.tapList.active').attr('data-name');
					var code = complexBtn.attr('data-code');
					var codeUrl = fatherClass + code;
					var url = './data/' + codeUrl + '.json';
					obj.loadProList(url);
				}
			},
			//加载离我最近，销量最高那一列
			loadMenu: function(menu) {
				var html = $(menuTpl).html();
				var fn = _.template(html);
				var tpl = fn({
					result: menu
				});
				return tpl;
			},
			//点击综合，销量和最近
			selectPro: function(e) {
				var target = $(e.currentTarget);
				var code = target.attr('data-code');
				var fatherClass = obj.$el.find('.tapList.active').attr('data-name');
				//如果是销量和最近
				if(code == "highestSales" || code == "closesToMe") {
					activeContainer.find('.menuList').removeClass('active');
					target.addClass('active');
					//恢复为综合排序
					activeContainer.find('.complex').html("综合排序");
					var that = obj;
					var code = target.attr('data-code');
					var codeUrl = fatherClass + code;
					var url = './data/' + codeUrl + '.json';
					obj.loadProList(url);
				} else {
					//点击的是综合
					activeContainer.find('.complexDiv').removeClass('displayNone');
					var showList = [obj.$el.find('.sameTap'), obj.$el.find('.menu'), $('.nav_view'), obj.$el.find('.complexDiv')];
					mylayer = new Layer($('body'), showList, function() {
						//回调，就是点击弹层除了消失还会执行什么操作
						activeContainer.find('.complexDiv').addClass('displayNone');
					});
					//整个body点击弹层都消失
					$('body').on('click', function() {
						mylayer.remove();
						activeContainer.find('.complexDiv').addClass('displayNone');
						$(this).off('click');
					})
					//绑定弹出框中的list
					activeContainer.find('.complexDivList').off('click').on('click', function(e) {
						//弹层显示
						activeContainer.find('.complexDiv').addClass('displayNone');
						mylayer.remove();
						//点击的增加黄色列
						var targetList = $(e.currentTarget);
						activeContainer.find('.complexDivList').removeClass('complexDivListActive');
						targetList.addClass('complexDivListActive');
						var code = targetList.attr('data-code');
						var name = targetList.attr('data-name');
						activeContainer.find('.menuList').removeClass('active');
						activeContainer.find('.menuList').eq(0).addClass('active');
						activeContainer.find('.menuList').eq(0).attr('data-code', code);
						target.html(name);
						var url = './data/' + fatherClass + code + '.json';
						obj.loadProList(url);
					});
				}
			},
			//加载商家列表
			loadProList: function(url) {
				yf.ajax({
					type: "get",
					url: url,
					async: true,
					success: function(data) {
						activeContainer.find('.proListContainner').html(_.template($(proList).html())({
							result: data.data
						}));
						activeContainer.find(".proList").on('click', function() {
							yf.openWebPage('../shoppingBuy/index.html#main');
						});
					},
					error:function(){
						var errorTxt = "找不到商铺-_-";
						var errorInfo = '<div style="width:120px;margin:100px auto;">'+errorTxt+'</div>';
						activeContainer.find('.proListContainner').html(errorInfo);
					}
				});
			}
		}
		return obj;
	});